<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZLTool系统管理-SDK用户授权</title>
    <link rel="icon" href="/static/icon.png">
    <link rel="stylesheet" href="/static/base.css"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/locale/zh-cn.min.js"></script>

    <style>
        .table-opt-div {
            text-align: right;
            margin-bottom: 16px;
        }
    </style>
</head>
<body>
<div id="app">
    <layout>
        <template #menu>
            <top-menu index="sys/server.html"></top-menu>
        </template>
        <template #main>
            <el-container>
                <el-aside width="200px">
                    <sys-menu index="sdkuser.html"></sys-menu>
                </el-aside>
                <el-main>
                    <div class="table-opt-div">
                        <el-button @click="showAddUser" type="primary">添加SDK用户</el-button>
                    </div>
                    <el-table :data="tableData" style="width: 100%" v-loading="tableLoading">
                        <el-table-column label="#" type="index" width="50"></el-table-column>
                        <el-table-column prop="detail" label="描述" width="120"></el-table-column>
                        <el-table-column label="允许IP" width="120" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.ip != '' ? scope.row.ip : '*'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="token" label="TOKEN"></el-table-column>
                        <el-table-column label="到期时间" width="165" align="center">
                            <template slot-scope="scope">
                                <el-tooltip class="item" effect="dark" :content="unix2Date(scope.row.expires_date)" placement="top">
                                    <el-tag :type="dateIsBefore(scope.row.expires_date) ? 'danger' : 'success'">{{tranDate(scope.row.expires_date)}}</el-tag>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="创建时间" width="165">
                            <template slot-scope="scope">
                                {{ unix2Date(scope.row.created_at) }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" header-align="center" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="deleteUser(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </template>
    </layout>

    <el-dialog title="添加SDK用户" :visible.sync="addUserDialogVisible" :close-on-click-modal="false" @closed="closeAddDialog">
        <el-form :model="addUserForm" ref="addUserForm" :rules="addUserRules" v-loading="formLoading" label-width="100px">
            <el-form-item label="描述" prop="detail">
                <el-input v-model="addUserForm.detail" autocomplete="off" placeholder="请输入用户的描述"
                          clearable></el-input>
            </el-form-item>
            <el-form-item label="允许的IP" prop="ip">
                <el-input v-model="addUserForm.ip" autocomplete="off" placeholder="如果需要限定IP地址则填写"
                          clearable></el-input>
            </el-form-item>
            <el-form-item label="TOKEN">
                <el-input v-model="addUserForm.token" disabled></el-input>
            </el-form-item>
            <el-form-item label="到期日期" prop="expires_date">
                <el-date-picker v-model="addUserForm.expires_date" :picker-options="pickerOptions" type="datetime" placeholder="为空则用户永不过期"></el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addUserDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitAddUser" :disabled="formLoading">添 加</el-button>
        </span>
    </el-dialog>

</div>
</body>
<script src="/static/layout.js"></script>
<script src="/static/menu.js"></script>
<script src="/static/sys-menu.js"></script>
<script src="/static/request.js"></script>
<script>

    new Vue({
        el: '#app',
        data: function() {
            var validcodeip = (rule, value, callback) => {
                const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
                if (value === "" || reg.test(value)) {
                    callback();
                } else {
                    return callback(new Error('IP地址不正确'));
                }
            };

            return {
                addUserDialogVisible: false,
                tableData: [],
                addUserForm: {
                    id: "",
                    detail: "",
                    ip: "",
                    expires_date: "",
                    token: "",
                    created_at: ""
                },
                tableLoading: false,
                formLoading: false,
                addUserRules: {
                    detail: [
                        {required: true, message: '请输入用户描述', trigger: 'blur'},
                    ],
                    ip: [
                        {validator:validcodeip, trigger:'blur'}
                    ]
                },
                pickerOptions: {
                    disabledDate(time) {
                       return time.getTime() < Date.now();
                    }
                },
            }
        },
        created: function () {
            this.$nextTick(() => {
                this.loadUsers()
            });
        },
        methods: {

            //添加sdk用户
            showAddUser() {
                this.addUserDialogVisible = true
            },

            submitAddUser() {
                this.$refs["addUserForm"].validate((valid) => {
                    if (valid) {
                        request.post(
                            '/sys/sdkuser/add',
                            Qs.stringify(this.addUserForm)
                        ).then(res => {
                            this.formLoading = false
                            this.addUserDialogVisible = false
                            if (res.data) {
                                let data = res.data;
                                if (data.code === 0) {
                                    //重新加载
                                    this.loadUsers()
                                    this.$message.success("添加SDK用户成功");
                                } else {
                                    this.$message.error(data.msg);
                                }
                            }
                        }).catch(onError);

                    } else {
                        return false;
                    }
                });
            },

            closeAddDialog() {
                this.$refs["addUserForm"].resetFields()
            },

            deleteUser(r) {
                this.$confirm(`确认删除SDK用户 '${r.detail}' ?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.get(`/sys/sdkuser/delete/${r.id}`).then(res => {
                        this.tableLoading = true
                        if (res.data) {
                            let data = res.data;
                            if (data.code === 0) {
                                this.loadUsers()
                            } else {
                                this.$message.error(data.msg);
                            }
                        }
                    }).catch(onError)
                }).catch(() => {});
            },

            //加载媒体配置
            loadUsers() {
                this.tableLoading = true
                request.get(`/sys/sdkuser/list`).then(res => {
                    this.tableLoading = true
                    if (res.data) {
                        this.tableLoading = false
                        let data = res.data;
                        if (data.code === 0) {
                            this.tableData = data.data
                        } else {
                            this.$message.error(data.msg);
                        }
                    }
                }).catch(onError);
            },

            unix2Date(ud) {
                if(ud) {
                    var dataStr = moment(ud).format('YYYY-MM-DD HH:mm:ss')
                    return dataStr
                }
                return "--"
            },

            tranDate(ud) {
                if(ud) {
                    moment.locale("zh-cn");
                    return moment(ud).fromNow()
                }
                return "永久"
            },

            dateIsBefore(ud) {
                return moment().isAfter(ud);
            }
        }
    })

</script>
</html>